import React, { Component } from "react";
import { Layout, Menu } from "antd";
import "./index.css";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  BgColorsOutlined,
  AntDesignOutlined,
} from "@ant-design/icons";
// import { NavLink } from "react-router-dom";
import GoodsList from '../comm/goosdList/GoodsList';
import OrderList from './orderList/OrderList'
import { HashRouter, Route, NavLink,Redirect } from "react-router-dom";
import GoodsMore from '../comm/goodsmore/goodsmore'
import Hdlb from '../comm/hdlb/Hdlb'
import Index from '../comm/index/index'
import StaffList from '../comm/staff/Staff'
import AddGoods from '../comm/AddGoods/AddGoods'

const { Header, Sider, Content } = Layout;

class index extends Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      <HashRouter>
        <Layout>
          <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
            <div className="logo" />
            <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
              <Menu.Item key="1">
                <UserOutlined />
                <NavLink to="/Index">首页</NavLink>
              </Menu.Item>
              <Menu.Item key="2">
                <VideoCameraOutlined />
                <NavLink to="/Hdlb">活动列表</NavLink>
              </Menu.Item>
              <Menu.Item key="3">
                <UploadOutlined />
                <NavLink to="/GoodsList">商品列表</NavLink>
              </Menu.Item>
              <Menu.Item key="4">
                <BgColorsOutlined />
                <NavLink to="/GoodsMore">商品详情</NavLink>
              </Menu.Item>
              <Menu.Item key="5">
                <AntDesignOutlined />
                <NavLink to="/OrderList">订单列表</NavLink>
              </Menu.Item>
              <Menu.Item key="6">
                <AntDesignOutlined />
                <NavLink to='/StaffList'>员工列表</NavLink>
              </Menu.Item>
              <Menu.Item key="7">
                <AntDesignOutlined />
                <NavLink to='/AddGoods'>新增商品</NavLink>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout className="site-layout">
            <Header className="site-layout-background" style={{ padding: 0 }}>
              {React.createElement(
                this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
                { className: "trigger", onClick: this.toggle }
              )}
              <span>头部</span>
            </Header>
            <Content
              className="site-layout-background"
              style={{ margin: "24px 16px", padding: 24, minHeight: 700 }}
            >
              {/* 内容 */}
                <Route path='/GoodsList' component={GoodsList}></Route>
                <Route path='/GoodsMore' component={GoodsMore}></Route>
                <Route path='/OrderList' component={OrderList}></Route>
                <Route path='/Hdlb' component={Hdlb}></Route>
                <Route path='/Index' component={Index}></Route>
                <Route path='/StaffList' component={StaffList}></Route>
                <Route path='/AddGoods' component={AddGoods}></Route>
                <Route path='/' exact render={()=><Redirect to='/Index'/>}/>
            </Content>
          </Layout>
        </Layout>
      </HashRouter>
    );
  }
}

export default index;
